<template>
  <div class="production">
    <div id="chartDom" class="chart"></div>
  </div>
</template>

<script setup>
import { inject, onMounted,ref } from "vue";
import generateDateArray from "@/utils/days.js";



onMounted(() => {
  let $echarts = inject("echarts");
  console.log($echarts);
  console.log(123);
  const dayData = ref([])
  let myChart = $echarts.init(document.getElementById("chartDom"));
  dayData.value = generateDateArray(20);


  myChart.setOption({
    title: {
      text: "",
    },
    color: "#5087ec",
    grid: {
      left: 5,
      right: 10,
      top: 10,
      bottom: 5,
      containLabel: true,
    },
    xAxis: {
      data: dayData.value,
      axisLabel: {
        color: "white", // 设置 x 轴字体颜色为白色
      },
    },
    yAxis: {
      axisLabel: {
        color: "white", // 设置 x 轴字体颜色为白色
      },
    },
    series: [
      {
        type: "bar",
        data: [
          500, 420, 520, 440, 570, 424, 570, 570, 570, 440, 510, 620, 540, 440,
          500, 420, 500, 420, 500, 420,
        ],
      },
    ],
  });
  setInterval(() => {
    // dayData.value[0] +=
    generateDateArray(20)
    myChart.setOption({
      xAxis: {
        data: dayData.value,
      },
    });
  },10000)
});
</script>

<style lang="less" scoped>
.production {
  width: 5.625rem;
  height: 3.875rem;
  background-image: url(../assets/imgs/icon_scph.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0.75rem 0.125rem 0.25rem;
  box-sizing: border-box;
  margin-top: 0.15rem;

  .chart {
    width: 5.325rem;
    height: 2.875rem;
  }
}
</style>
